<template>
  <div>
    <div
      class="Histogram"
      style="height: 300px; width: 450px"
      ref="chart"
    ></div>
  </div>
</template>
  <script>
export default {
  name: "Histogram",
  props:['number'],
  watch: {
    number(newValue, oldValue) {
        console.log('Child prop changed:', newValue);
        this.initChartData();
        this.getChart();
      } 
  },
  data() {
  return {
    things: ["阅读", "举手", "写字", "缺席", "其他"],
    option: {
      title: {
        text: "课堂情况反馈",
        left: "35%",
        top: '5%',
        textStyle: {
          color: "#6080b9",
        },
      },
      tooltip: {}, // 默认悬停显示信息
      xAxis: {
        name: "行为",
        data: [],
        axisLabel: {
          rotate: 0, // 旋转角度，可以根据实际情况调整
        },
      },
      yAxis: {
        name: "人数",
      },
      series: [
        {
          itemStyle: {
            color: "#6a9aee", // 设置柱状图的颜色
            borderColor: "#a6c1ee", // 设置柱状图的边框颜色
            borderRadius: [3, 3, 0, 0], // 设置柱状图的边框圆角，顺序分别为左上、右上、右下、左下
          },
          name: "人数",
          data: [],
          type: "bar",
          emphasis: {
            focus: "series", // 强调样式生效于 series
          },
          label: {
            show: true, // 显示标签
            position: "inside", // 标签位置：在柱形的顶部显示
            formatter: "{c}", // 标签内容格式化，{c} 表示数据值
            color: "black", // 标签文字颜色
          },
        },
      ],
    },
  };
},
  mounted() {
    this.initChartData();
    this.getChart();
    console.log(this.number);
  },
  methods: {
    initChartData() {
      this.option.xAxis.data = this.things;
      this.option.series[0].data = this.number;
    },
    getChart() {
      // 引用chart并初始化
      this.chart = this.$echarts.init(this.$refs.chart);
      // 使用刚指定的配置项和数据显示图表。
      this.chart.setOption(this.option);
      //自适应
      window.addEventListener("resize", () => {
        this.chart.resize();
      });
    },
  },
};
</script>
  
  